<template>
  <div class="tab_container">
    <div class="music_slider">
      <el-slider
        :show-tooltip="false"
        @mousedown.native="isChange = true"
        @mouseup.native="isChange = false"
        :max="maxTime"
        @change="handleTime"
        v-model="sliderTime"
      ></el-slider>
      <audio
        @timeupdate="durationUpdate"
        @ended="nextSong"
        @pause="onPause"
        @play="songPlay"
        id="audio"
        autoplay
        ref="audio"
        :src="musicUrl"
      ></audio>
    </div>
    <div class="music_info">
      <div class="music_cover">
        <el-image
          :src="
            musicDetail.al.picUrl
              ? musicDetail.al.picUrl
              : require('@/assets/img/youke.gif')
          "
          fit="cover"
        ></el-image>
      </div>
      <div class="info_wrap">
        <div class="music_name">{{ musicDetail.name }}</div>
        <div class="singer_name">{{ musicDetail.ar[0].name }}</div>
      </div>
      <div v-show="loginStatus == 'true'" class="like_btn">
        <i
          v-show="!isLike"
          @click="handleLike(true)"
          class="iconfont icon-aixin1"
        ></i>
        <i
          v-show="isLike"
          @click="handleLike(false)"
          class="iconfont icon-aixin"
        ></i>
      </div>
    </div>
    <div class="play_wrap">
      <div class="play_btn">
        <!-- //上一首 -->
        <i @click="preSong" class="iconfont icon-shangyishou"></i>
        <!-- 播放歌曲 -->
        <i
          @click="playSong"
          v-show="isPlaying == 'false'"
          class="iconfont icon-bofang"
        ></i>
        <!-- 暂停播放 -->
        <i
          @click="pauseSong"
          v-show="isPlaying == 'true'"
          class="iconfont icon-pause-full"
        ></i>
        <!-- 下一首 -->
        <i @click="nextSong" class="iconfont icon-xiayishou"></i>
      </div>
    </div>
    <div class="volune_wrap">
      <i
        v-show="!isShowList"
        @click="toList('true')"
        class="iconfont icon-yinleliebiao"
      ></i>
      <i
        v-show="isShowList"
        @click="toList('false')"
        class="iconfont icon-yinleliebiao active"
      ></i>

      <div @click="changeOrder" class="play_order">
        <i
          v-show="playOrder == 0"
          class="iconfont icon-bofang-xunhuanbofang"
        ></i>
        <i v-show="playOrder == 1" class="iconfont icon-danquxunhuan"></i>
        <i v-show="playOrder == 2" class="iconfont icon-suijibofang"></i>
      </div>

      <i
        v-show="!noSound"
        @click="handleSound(true)"
        class="iconfont icon-24gf-volumeMiddle"
      ></i>
      <i
        v-show="noSound"
        @click="handleSound(false)"
        class="iconfont icon-24gf-volumeCross"
      ></i>
      <div class="block">
        <el-slider
          v-model="nowVolume"
          :max="100"
          :step="1"
          @change="changeVolume"
        ></el-slider>
      </div>
      <i @click="onPlay" class="iconfont icon-shangjiantou-copy"></i>
    </div>

    <transition name="el-zoom-in-bottom">
      <div v-show="isOnPlay == 'true'" class="music_play">
        <MusicPlay @musicChange="musicChange"></MusicPlay>
      </div>
    </transition>
  </div>
</template>

<script>
import moment from "moment";
import { mapGetters } from "vuex";
import MusicPlay from "@/components/musicPlay/MusicPlay";
import {
  getMusicUrl,
  getMusicDetailList,
  getMusicLike,
  getUserLikeList,
} from "@/util/music.js";
export default {
  name: "Tab",
  components: {
    MusicPlay,
  },

  data() {
    return {
      likeList: [],
      isLike: false,
      //滑块当前进度
      sliderTime: 0,
      //判断是否被拖动
      isChange: false,
      //当前音量
      nowVolume: 50,
      //是否静音
      noSound: false,
      isShowList: false,
    };
  },
  watch: {
    //监听歌曲id变化播放相应歌曲
    songId(newValue, oldValue) {
      let ids = this.playList.map((v) => v.id);
      let listIndex = ids.indexOf(newValue) + 1;
      this.$store.dispatch("musicPlay/saveListIndex", listIndex);

      this.getMusicUrl(newValue);
      // if (this.songListId) {
      //   this.getPlayListDetail();
      // }
      // this.getLyric(newValue);
      // this.getMusicComment(newValue, 100);
    },
    //监听喜欢按钮
    isLike(newVal) {
      this.getLikeList();
    },
    //监听播放状态
    isPlaying(newVal) {
      if (newVal == "true") {
        this.playSong();
      } else {
        this.pauseSong();
      }
    },
    $route(to) {
      if (to.path !== "/playList") {
        this.isShowList = false;
      }
    },
  },
  created() {
    if (this.loginStatus == "true") {
      this.getLikeList();
    }
  },

  computed: {
    ...mapGetters("userInfo", ["userId", "loginStatus"]),
    ...mapGetters("musicPlay", [
      //歌词开关
      "isOnPlay",
      //当前播放歌曲url
      "musicUrl",
      //当前歌曲详情
      "musicDetail",
      //当前播放歌单id
      "songListId",
      //当前播放歌曲id
      "songId",
      //判断当前是否在播放
      "isPlaying",
      //判断播放顺序模式
      "playOrder",
      //当前播放列表
      "playList",
      //已经播放过的列表
      "hasPlayList",
      //可播放范围
      "slider",
      //播放范围
      "playDur",
      //歌曲时长
      "durationTime",
      //当前播放音量
      "volumeVal",
      //歌曲时长秒数
      "maxTime",
      //歌曲当前秒数
      "currentTime",
      "listIndex",
    ]),
  },

  methods: {
    musicChange(e) {
      if (e == 1) {
        this.preSong();
      } else {
        this.nextSong();
      }
    },
    //打开歌词界面播放器
    onPlay() {
      this.$store.dispatch("musicPlay/saveIsOnPlay", "true");
      sessionStorage.setItem("isOnPlay", true);
    },
    //播放歌曲
    playSong() {
      this.$store.dispatch("musicPlay/saveIsPlaying", "true");
      sessionStorage.setItem("isPlaying", true);
      this.$refs.audio.play();
    },
    //暂停播放歌曲
    pauseSong() {
      this.$store.dispatch("musicPlay/saveIsPlaying", "false");
      sessionStorage.setItem("isPlaying", false);
      this.$refs.audio.pause();
    },
    //获取歌曲播放链接
    async getMusicUrl(id) {
      let {
        data: { data },
      } = await getMusicUrl(id);
      //判断没有版权的情况
      if (data[0].url === null) {
        this.$message({
          type: "warning",
          message: `歌曲暂未获得版权`,
        });
        this.nextSong();
      }

      //判断是否为用户喜欢歌曲
      let isLike = this.likeList.some((item) => {
        return item == id;
      });
      this.$store.dispatch("musicPlay/saveIsLike", isLike);
      sessionStorage.setItem("isLike", isLike);

      //保存当前歌曲url播放歌曲
      this.$store.dispatch("musicPlay/saveMusicUrl", data[0].url);
      sessionStorage.setItem("musicUrl", data[0].url);

      //获取当前歌曲信息并保存
      let res = await getMusicDetailList(id);
      this.$store.dispatch("musicPlay/saveMusicDetail", res.data.songs[0]);
      sessionStorage.setItem("musicDetail", JSON.stringify(res.data.songs[0]));

      //保存歌曲时长
      let maxTime = parseInt(moment(res.data.songs[0].dt).format("X"));
      // console.log(maxTime);
      this.$store.dispatch("musicPlay/savemaxTime", maxTime);
      sessionStorage.setItem("maxTime", maxTime);
      //保存格式化总时长
      let durationTime = moment(maxTime * 1000).format("mm:ss");
      this.$store.dispatch("musicPlay/saveDurationTime", durationTime);
      sessionStorage.setItem("durationTime", durationTime);
    },
    //监听歌曲进度
    durationUpdate(res) {
      if (this.isChange === true) return;
      //滑块滑动
      this.sliderTime = this.$refs.audio.currentTime;

      let currentTime = moment(this.$refs.audio.currentTime * 1000).format(
        "mm:ss"
      );
      //保存当前歌曲原始秒数
      let time = this.$refs.audio.currentTime;
      this.$store.commit("musicPlay/saveCurrentTime", time);
      sessionStorage.setItem("currentTime", time);
    },
    //拖动进度条
    handleTime(e) {
      if (this.maxTime === 0) return;
      this.$refs.audio.currentTime = e;
      this.isChange = false;
    },
    //拖动改变音量
    changeVolume() {
      this.$refs.audio.volume = this.nowVolume / 100;
    },
    //静音
    handleSound(type) {
      this.noSound = type;
      if (type == true) {
        this.nowVolume = 0;
      } else {
        this.nowVolume = 50;
      }
      this.$refs.audio.volume = this.nowVolume / 100;
    },
    //获取喜欢音乐列表
    async getLikeList() {
      let { data } = await getUserLikeList(this.userId);
      // console.log(data)
      this.likeList = data.ids;
    },
    //喜欢音乐
    async handleLike(type) {
      let { data } = await getMusicLike(this.songId, type);
      // console.log(data);
      if (data.code == 200 && type == true) {
        this.$message.success("已添加到我喜欢的音乐");
        this.isLike = true;
      } else {
        this.$message("取消喜欢成功");
        this.isLike = false;
      }
    },
    //改变播放模式
    changeOrder() {
      if (this.playOrder == 2) {
        this.$store.commit("musicPlay/savePlayOrder", 0);
        sessionStorage.setItem("playOrder", 0);
      } else {
        this.$store.commit("musicPlay/savePlayOrder", this.playOrder + 1);
        sessionStorage.setItem("playOrder", this.playOrder);
      }
    },
    //上一首
    preSong() {
      let songId = this.songId;
      let idList = this.playList.map((v) => v.id);
      let index = idList.indexOf(songId);
      //判断播放模式
      switch (this.playOrder) {
        case 0:
          //保存当前歌曲id
          if (index == 0) {
            index = idList.length;
          }
          this.$store.dispatch("musicPlay/saveSongId", idList[index - 1]);
          sessionStorage.setItem("songId", idList[index - 1]);
          break;
        case 1:
          this.rePlaySong(songId, index);
          break;
        case 2:
          this.randomPlay(index, idList);
          break;
      }
    },
    //下一首
    nextSong() {
      let songId = this.songId;
      // console.log(this.playList);
      let idList = this.playList.map((v) => v.id);
      let index = idList.indexOf(songId);

      //判断播放模式
      switch (this.playOrder) {
        case 0:
          this.cirPlay(index, idList);
          break;
        case 1:
          this.rePlaySong(songId, index);
          break;
        case 2:
          this.randomPlay(index, idList);
          break;
      }
    },
    //列表循环
    cirPlay(index, idList) {
      //保存当前歌曲id
      if (index == idList.length - 1) {
        index = -1;
      }
      this.$store.dispatch("musicPlay/saveSongId", idList[index + 1]);
      sessionStorage.setItem("songId", idList[index + 1]);
    },
    //单曲循环
    rePlaySong() {
      this.$store.dispatch("musicPlay/saveIsPlaying", "true");
      sessionStorage.setItem("isPlaying", "true");
      this.$refs.audio.load();
    },
    //随机播放
    randomPlay(index, idList) {
      let randomNum = Math.round(Math.random() * idList.length);
      this.$store.dispatch("musicPlay/saveSongId", idList[randomNum]);
    },
    //暂停事件
    onPause(e) {
      // console.log(e);
    },
    songPlay(e) {
      // console.log(e);
    },
    //跳转到播放列表
    toList(type) {
      this.isShowList = !this.isShowList;
      if (type == "true") {
        this.$router.push("/playList");
      } else {
        this.$router.go(-1);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.tab_container {
  height: 60px;
  padding: 0 8rem;
  // background-color: #ddd;
  display: flex;
  position: relative;
  .music_slider {
    position: absolute;
    top: 0;
    left: 0;
    /deep/.el-slider {
      width: 100vw;
      height: 20px;
      line-height: 20px;
      overflow: hidden;
      &:hover .el-tooltip {
        width: 11px;
        height: 11px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12),
          0 0 6px rgba(19, 18, 18, 0.54);
      }
      .el-slider__bar {
        height: 2px;
      }
      .el-slider__runway {
        margin: 0;
        background-color: #e0eaf3;
        height: 2px;
        border-radius: 0;
      }
      .el-tooltip {
        margin-top: 11px;
        height: 0px;
        width: 0px;
        border: none;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
      }
      .el-slider__button-wrapper {
        width: 1px;
        height: 1px;
      }
    }
  }
  .music_info {
    width: 300px;
    display: flex;
    align-items: center;
    .music_cover {
      width: 45px;
      height: 45px;
      .el-image {
        width: 100%;
        height: 100%;
        border-radius: 5px;
      }
    }
    .info_wrap {
      margin-left: 10px;
      .music_name {
        font-size: 16px;
        font-weight: 600;
      }
      .singer_name {
        color: rgb(128, 119, 119);
      }
    }
    .like_btn {
      margin-left: 20px;
    }
  }
  .play_wrap {
    flex: 1;
    display: flex;
    justify-content: center;
    .play_btn {
      height: 100%;
      width: 150px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      i {
        font-size: 25px;
      }
    }
  }
  .volune_wrap {
    width: 300px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding-right: 40px;
    .active {
      color: rgb(55, 70, 211);
    }
    // padding: 0 40px;
    .block {
      /deep/.el-slider {
        width: 90px;
        .el-slider__runway {
          margin: 0;
          background-color: #e0eaf3;
          height: 4px;
          border-radius: 0;
        }
        .el-slider__bar {
          height: 4px;
          background-color: #000000;
        }
        .el-slider__button-wrapper {
          width: 1px;
          height: 1px;
        }
        .el-tooltip {
          margin-top: 13px;
          height: 5px;
          width: 5px;
          border: #000000 2px solid;
          background-color: #000000;
          border-radius: 50%;
        }
      }
    }
    i {
      font-size: 17px;
    }
    .icon-yinleliebiao {
      font-size: 20px;
    }
    .icon-24gf-volumeMiddle {
      font-size: 15px;
    }
  }
  .el-zoom-in-bottom-enter-active {
    transition: all 0.7s;
  }
  .el-zoom-in-bottom-leave-active {
    transition: all 0.7s;
  }
  .music_play {
    position: fixed;
    top: 0;
    width: 100vw;
    height: 100vh;
    // background-color: #504b46;
    z-index: 9999;
    left: 0;
  }
}
</style>